import Base from "../Base.js";
import moviesApi from "../../api/movies.js";
import "../../css/movie.css"
export default class extends Base {
  constructor(props) {
    super(props);
    this.data = {
      movies: {
        cname: "",
        ename: "",
        type: "",//电影类型
        area: "",//首映地区
        time: "",//时长
        poster: "", //电影海报
        upDate: "",//上映时间
        isClassic: "", // 是否是经典 
        intro: "",//剧情
        score: "", // 电影评分 	
        count: "", // 电影票房
        director: "",//导演名字
        actor: "",//演员名字
        images: [] // 剧集数组:每一项是一个图片路径字符串
      },
    }
  };
  handle() {
    $("#submit").on("click", async e => {
      switch (e.target.value) {
        case "确认新增":
          this.data.movies.isClassic = $(`input[name=isClassic]`).val();
          console.log(this.data.movies);
          await moviesApi.add(this.data.movies);
          location.hash = "/info/movies-list";
          break;
      }
    });
    this.inputEles.on("input", e => {
      const ele = $(e.target);
      const key = ele.attr("name");//获取被输入节点的name属性
      //获取被修改的属性的值
      this.data.movies[key] = ele.val();
    });
    this.texEles.on("input", e => this.data.movies.intro = e.target.value);






  //   //海报上传
  //   layui.upload.render({
  //     elem: '#addfileposter',
  //     url: '/resource/movies/poster',//改成您自己的上传接口
  //     auto: false,
  //     multiple: true,
  //     bindAction: '#submit',
  //     choose: function (obj) {
  //       //预读本地文件示例，不支持ie8
  //       obj.preview(function (index, file, result) {
  //         $('#filePoster').attr('src', result); //图片链接（base64）
  //       });
  //     },
  //     data: {
  //       _id: () => this.data.movies._id
  //     },
  //     done: function (res) {
  //       layer.msg('上传成功');
  //       //上传成功
  //     }
  //   });
  //   //相关图上传
  //   layui.upload.render({
  //     elem: '#test2',
  //     url: "/resource/movies/upload",
  //     auto: false,
  //     multiple: true,
  //     bindAction: '#submit',
  //     exts: 'png|jpg|bmp'
  //     , choose: function (obj) {
  //       //预读本地文件示例，不支持ie8
  //       obj.preview(function (index, file, result) {
  //         $('#filePreview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 70px;margin-right:2px;margin-top:2px; ">');
  //       })
  //     },
  //     data: {
  //       _id: () => this.data.movies._id
  //     },
  //     done: res => {
  //       //上传完毕
  //       layer.msg('上传成功');
  //     }
  //   });
  };

  render() {
    this.el.html(`
        <div class="movieAdd">
        <form class="layui-form " action="#">
                    <div class="layui-form-item movieAdd-item">
                    <label class="layui-form-label">电影名</label>
                    <div class="layui-input-inline">
                      <input type="text" name="cname" lay-verify="required" placeholder="请输入电影中文名" autocomplete="off" class="layui-input">
                    </div>
                  </div>

                  <div class="layui-form-item movieAdd-item">
                  <label class="layui-form-label">英文名</label>
                  <div class="layui-input-inline">
                    <input type="text" name="ename" lay-verify="required" placeholder="请输入电影英文名" autocomplete="off" class="layui-input">
                  </div>
                  </div>

                <div class="layui-form-item movieAdd-item">
                <label class="layui-form-label">导演名字</label>
                <div class="layui-input-inline">
                <input type="text" name="director" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
                </div>

                <div class="layui-form-item movieAdd-item">
                <label class="layui-form-label">演员名字</label>
                <div class="layui-input-inline">
                <input type="text" name="actor" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
                </div>

                <div class="layui-form-item movieAdd-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                  <input type="text" name="type" lay-verify="required" placeholder="请输入电影类型" autocomplete="off" class="layui-input">
                </div>
                </div>

                <div class="layui-form-item">
                <label class="layui-form-label">是否经典</label>
                <div class="layui-input-block">
                  <input type="radio" name="isClassic" value="true" title="是" checked>
                  <input type="radio" name="isClassic" value="false" title="否">
                </div>
              </div>
                

              <div class="layui-form-item movieAdd-item">
              <label class="layui-form-label">电影时长</label>
              <div class="layui-input-inline">
                <input type="number" name="time" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
              </div>

              <div class="layui-form-item movieAdd-item">
              <label class="layui-form-label">电影评分</label>
              <div class="layui-input-inline">
                <input type="number" name="score" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
              </div>
              <div class="layui-form-item movieAdd-item">
              <label class="layui-form-label">电影票房</label>
              <div class="layui-input-inline">
                <input type="text" name="count" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
              </div>

              <div class="layui-form-item movieAdd-item">
              <label class="layui-form-label">上映时间</label>
              <div class="layui-input-inline">
                <input type="text" name="upDate" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item movieAdd-item">
              <label class="layui-form-label">首映地区</label>
                <div class="layui-input-inline">
                  <input type="text" name="area" lay-verify="required" placeholder="请输入首映地区" autocomplete="off" class="layui-input">
                </div>
             </div>

    
       
  <div class="layui-form-item layui-form-text">
  <label class="layui-form-label">剧情简介</label>
  <div class="layui-input-block">
    <textarea name="intro" placeholder="请输入内容" class="layui-textarea"></textarea>
  </div>
  </div>
 
<div class="layui-form-item">
  <div class="layui-input-block">
  <input type="button"  class="layui-btn" id="submit"  value="确认新增"> 
  </div>
</div>
    </form>
    </div>   
        `);
    layui.form.render();
    $(".movieAdd").css({
      width: "600px",
      margin: "auto",
      color: "#000",
      backgroundColor: "#fff",
      padding: "20px",
      opacity: 0.7
    })
    $(".layui-form-item").css({
      marginTop: "10px",
      marginBottom: "0px",
    })
    $(".layui-textarea").css({
      width: "450px"
    });
    $(".layui-upload-img").css({
      width: "92px",
      height: "128px",
      margin: "0 10px 10px 0"
    })
    this.inputEles = $(".layui-input")//获取表格所有的input节点
    this.texEles = $(".layui-textarea");//获取剧情简介
  }
}
